<template>
	<view class="update_page">
		<!--提示消息-->
		<u-toast ref="uToast"></u-toast>
		<bakc
			:text="vuex_select_equipment.deviceName ? vuex_select_equipment.deviceName : vuex_new_equipment.deviceName"
			:isReturn="true" />
		<!--文本输入框-->
		<view class="input">
			<u--input color='#FFFFFF' border='none' placeholder="请输入内容" v-model="deviceName" clearable></u--input>
		</view>

		<!--保存按钮-->
		<view class="save_btn" @click="save">
			<view class="save_text">保存</view>
		</view>
	</view>
</template>

<script>
	import {
		updateAd
	} from '@/config/api.js';
	export default {
		data() {
			return {

				deviceName: '',

				//标题移动px
				textMLeft: 'margin-left: ${variable}rpx;',
				//成功提示
				success: {
					type: 'success',
					title: '成功主题(带图标)',
					message: "更新成功",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				},
			}
		},
		onLoad() {
			this.deviceName = this.vuex_select_equipment.deviceName ? this.vuex_select_equipment.deviceName : this
				.vuex_new_equipment.deviceName;
		},
		methods: {

			//提升消息
			showToast() {
				this.$refs.uToast.show({
					...this.success,
					complete() {
						this.success.url && uni.navigateTo({
							url: this.success.url
						})
					}
				})
			},

			//保存设备修改信息
			async save() {
				//设置请求信息
				uni.showLoading({
					title: '更新中...',
					mask: true
				})
				let equipmentId = this.vuex_select_equipment.id ? this.vuex_select_equipment.id  : this.vuex_new_equipment.id;
				let param = {
					name: this.deviceName,
					id: equipmentId
				}
				const resp = await updateAd(param);
				if (resp.code == 20000) {
					//修改vuex中的设备名称
					let equipment = this.vuex_select_equipment;
					this.$set(equipment, 'deviceName', this.deviceName);

					//修改新配网设备中的设备名称
					let new_equipment = this.vuex_new_equipment;
					this.$set(new_equipment, 'deviceName', this.deviceName);
				}
				//打印设备名称是否更新成功
				this.showToast();
				uni.hideLoading();
				setTimeout(()=>{
					uni.navigateBack(1)
				},500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.update_page {
		background: #181818;
		height: 100vh;

		.input {
			width: 620rpx;
			height: 50rpx;
			background: #353535;
			border-radius: 50rpx;
			margin: 30rpx auto;
			display: flex;
			padding: 30rpx;
		}

		.save_btn {
			height: 63px;
			background: rgb(53, 53, 53);
			width: 650rpx;  
			border-radius: 18px;
			position: absolute;
			bottom: 80rpx;
			left: 50rpx;

			.save_text {
				text-align: center;
				line-height: 63px;
				color: white;
			}
		}
	}
</style>